<template>
  <view class="backgroundS">
    <view class="container">
      <view class="loginUser">
        <image src="../../static/image/personal/missing-face.png" class="userInfo" @click="userInfos"
          v-if="JSON.stringify(userInfo)==='{}'"></image>
        <image :src="userInfo.data.profile.avatarUrl" class="userInfo" v-else></image>
        <view class="lineWidth">
          <text class="userName">{{userInfo.data.profile.nickname}}</text>
          <view class="userRander">
            <text>{{userInfo.data.profile.follows}}关注</text>
            <text>{{userInfo.data.profile.followeds}}粉丝</text>
            <text class="border">lv.{{userInfo.data.profile.eventCount}}</text>
          </view>
        </view>
      </view>
      <view class="navigte"></view>
      <view class="personalContent">
        <view class="toMusicList">
          <image :src='myFavoriteList[0].coverImgUrl' class="listCover"></image>
          <view class="listInfo">
            <text>{{myFavoriteList[0].name}}</text>
            <text>{{myFavoriteList[0].trackCount}}首</text>
          </view>
        </view>
      </view>
      <view class="setupcollect">

        <text @click="toggle('setupsong')" :class="{ active: activeName === 'setupsong' }">创建歌单</text>
        <text @click="toggle('collectsong')" :class="{ active: activeName === 'collectsong' }">收藏歌单</text>
      </view>

      <view class="setupsong" v-if="activeName === 'setupsong'">
        <view class="title">创建歌单({{playlist.length}})个</view>
        <view v-for="(item,i) in playlist" :key="i">

          <view class="toMusicLists">
            <image :src='item.coverImgUrl' class="listCover"></image>
            <view class="listInfo">
              <text>{{item.name}}</text>
              <text>{{item.trackCount}}首</text>
            </view>
          </view>
        </view>
      </view>

      <view class="collectsong" v-else>
        <view class="title">收藏歌单()个</view>
        <view class="toMusicLists">
          <image src='../../static/image/favicon.ico' class="listCover"></image>
          <view class="listInfo">
            <text>收藏的音乐</text>
            <text>大奖很符合</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  export default {
    computed: {
      // 调用 mapState 辅助方法，把 m_user 模块中的数据映射到当前用组件中使用
      ...mapState('musicMyPage', ['userInfo']),
    },
    onLoad() {
      this.getUserMisucDetail()
    },
    data() {
      return {
        activeName: 'setupsong',
        // 所以歌单
        playlist: [],
        // 我喜欢的歌单
        myFavoriteList: [],
        // 创建歌单
        createdList: [],
        // 收藏歌单
        collectedList: [],
      };
    },



    methods: {
      // 把我喜欢的的音乐和收藏创建分开
      // 获取用户歌单
      async getUserMisucDetail() {
        const {
          data: res
        } = await uni.$http.get('/user/playlist?uid=' + this.userInfo.data.profile.userId)
        console.log(res)
        if (res.code !== 200) {
          return uni.$showMsg()
        }
        this.playlist = res.playlist
        // 获取my歌单
        this.myFavoriteList.push(this.playlist[0])
        this.playlist = this.playlist.splice(1)
        // 获取创建歌单
        // 获取收藏歌单
      },
      // 收藏歌单和创建歌单的显示与隐藏
      toggle(change) {
        this.activeName = change
      },
      // 点击用户名跳转到登录页面
      userInfos() {
        uni.redirectTo({
          url: '/subpkg/login_Music/login_Music'
        });
      }
    }
  }
</script>

<style lang="scss">
  .listInfo text {
    /* 多行文本溢出隐藏，省略号代替 */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    /* 设置对齐模式 */
    -webkit-box-orient: vertical;
    /* 设置盒子的行数 */
    -webkit-line-clamp: 1;
  }

  .active {
    margin-top: 5rpx;
    border-bottom: 4px solid red;
  }


  .backgroundS {
    width: 100%;

    background-color: #f5f5f5;
    position: absolute;


  }

  .navigte {
    border-radius: 25rpx;
  }

  .userRander text {
    font-size: 26rpx;
    padding: 0 20rpx;
    border-right: 1rpx solid #747474;


  }

  .userRander .border {

    border-right: none
  }

  .lineWidth {
    margin-top: 100rpx;
    line-height: 70rpx;
    text-align: center;
  }

  .container {
    margin: 0 30px;
    background-color: #f5f5f5;
    margin-bottom: 30rpx;
    position: relative;


  }

  .userInfo {
    max-width: 120rpx;
    height: 120rpx;
    position: absolute;
    top: -3%;
    border-radius: 50%;

  }

  .setupsong {
    padding-left: 40rpx;
  }

  .setupsong .title {
    padding: 20rpx 0,
  }

  .loginUser {
    height: 250rpx;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 100rpx;
    border-radius: 25rpx;
  }

  .navigte {
    margin-top: 50rpx;
    height: 225rpx;
    background-color: #fff;
  }

  .personalContent {
    display: flex;
    align-items: center;
    margin-top: 50rpx;
    height: 130rpx;
    background-color: #fff;
    padding-left: 40rpx;
    border-radius: 25rpx;
  }

  .listCover {
    max-width: 80rpx;
    height: 80rpx;
  }

  .toMusicList {
    display: flex;
    margin-top: 10rpx;
  }

  .toMusicLists text {
    font-size: 27rpx;
    color: #020202;
  }

  image {
    border-radius: 20%;
  }

  .toMusicList text {
    font-size: 27rpx;
    color: #020202;
  }

  .toMusicLists {
    display: flex;
    margin-top: 10rpx;

  }

  .listInfo {
    margin-left: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .setupcollect {
    // background-color: aqua;
    display: flex;
    align-items: center;
    height: 120rpx;
    justify-content: space-around
  }

  .setupsong {
    border-radius: 25rpx;
    background-color: #fff;
    padding-bottom: 20rpx;
  }

  .collectsong {
    height: 180rpx;
    background-color: #fff;
  }
</style>
